<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Star Admin Free Bootstrap Admin Dashboard Template</title>
  <!-- plugins:css -->
  <link rel="stylesheet" href="../../vendors/iconfonts/mdi/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="../../vendors/css/vendor.bundle.base.css">
  <link rel="stylesheet" href="../../vendors/css/vendor.bundle.addons.css">
  <!-- endinject -->
  <!-- plugin css for this page -->
  <!-- End plugin css for this page -->
  <!-- inject:css -->
  <link rel="stylesheet" href="../../css/style.css">
  <!-- endinject -->
  <link rel="shortcut icon" href="../../images/favicon.png" />
</head>

<body>
  <div class="container-scroller">
    <div class="container-fluid page-body-wrapper full-page-wrapper auth-page">
      <div class="content-wrapper d-flex align-items-center auth register-bg-1 theme-one">
        <div class="row w-100">
          <div class="col-lg-4 mx-auto">
            <h2 class="text-center mb-4">Register</h2>
            <div class="auto-form-wrapper">
              <form id="reg-form" action="#">
                <div class="form-group">
                  <div class="input-group">
                    <input name="telephone" type="text" class="form-control" placeholder="Telephone">
                    <div class="input-group-append">
                      <button id="valid-btn" type="button" class="btn btn-primary input-group-text">
                        <i class="mdi mdi-arrow-right"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <input name="name" type="text" class="form-control" placeholder="Username">
                    <div class="input-group-append">
                      <span class="input-group-text">
                        <i class="mdi mdi-check-circle-outline"></i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <input name="password" type="password" class="form-control" placeholder="Password">
                    <div class="input-group-append">
                      <span class="input-group-text">
                        <i class="mdi mdi-check-circle-outline"></i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="input-group">
                    <input name="confirm-password" type="password" class="form-control" placeholder="Confirm Password">
                    <div class="input-group-append">
                      <span class="input-group-text">
                        <i class="mdi mdi-check-circle-outline"></i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <!--<label class="label">Password</label>-->
                  <div class="input-group">
                    <input name="otp-code" type="text" class="form-control" placeholder="验证码">
                    <div class="input-group-append">
                      <span class="input-group-text">
                        <i class="mdi mdi-check-circle-outline"></i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="form-group d-flex justify-content-center">
                  <div class="form-check form-check-flat mt-0">
                    <label class="form-check-label">
                      <input type="checkbox" class="form-check-input" checked> I agree to the terms
                    </label>
                  </div>
                </div>
                <div class="form-group">
                  <button id="reg-btn" class="btn btn-primary submit-btn btn-block">Register</button>
                </div>
                <div class="text-block text-center my-3">
                  <span class="text-small font-weight-semibold">Already have and account ?</span>
                  <a href="login.html" class="text-black text-small">Login</a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- content-wrapper ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="../../vendors/js/vendor.bundle.base.js"></script>
  <script src="../../vendors/js/vendor.bundle.addons.js"></script>
  <!-- endinject -->
  <!-- inject:js -->
  <script src="../../js/off-canvas.js"></script>
  <script src="../../js/misc.js"></script>
  <!-- endinject -->
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
</body>
<script type="text/javascript">
  $(function () {

    var base = "http://localhost:8080"
    /**
     * 验证手机号码
     */
    $("#valid-btn").click(function () {
      var $telephone = $("input[name=telephone]")
      console.log($telephone.val())
      if ($telephone.val() !== null) {
        $.get(base + "/user/otp",
          {
            telephone: $telephone.val()
          },
          function (data, status) {
            if (data.status = "success") {
              alert("验证码已经发送到您的手机")
              // 手机号码禁止修改
              $telephone.attr("readonly", "readonly")
              // TODO 设置发送验证码为禁用，60s之后启用
              $("#valid-btn").attr("disabled", "disabled")
              console.log($("#reg-btn"))
              $("#reg-btn").removeAttr("disabled")
            }
            else {
              alert("验证码发送失败");
            }
          }
        )
      } else {
        alert("手机号码不能为空")
      }
    });

    $("#reg-btn").click(function () {
      /**
       * 先验证验证码
       * @type {jQuery|HTMLElement}
       */
      var $telephone = $("input[name=telephone]")
      var $otpCode = $("input[name=otp-code]")

      $("#reg-form").validate({
        rules: {
          telephone: {
            required: true,
            rangelength: [11, 11]
          },
          "otp-code": {
            required: true,
            rangelength: [6, 6]
          },
          name: {
            required: true,
            rangelength: [6, 10]
          },
          password: {
            required: true,
            rangelength: [6, 10]
          },
          "confirm-password": {
            equalTo: "input[name=password]"
          }
        },
        messages: {
          telephone: {
            required: "手机号不能为空",
            rangelength: "手机号不合法",
          },
          "otp-code": {
            required: "验证码必填",
            rangelength: "验证码不合法"
          },
          name: {
            required: "用户名必填",
            rangelength: "用户名长度必须为6-10位"
          },
          password: {
            required: "密码必填",
            rangelength: "密码长度必须为6-10位"
          },
          "confirm-password": {
            equalTo: "两次输入的密码不一致"
          }
        },
        submitHandler: function (form) {
          $.ajax({
            url: base + "/user/otp",
            data: {
              telephone: $telephone.val(),
              otpCode: $otpCode.val()
            },
            method: "POST",
            xhrFields: {
              withCredentials: true
            }
          }).done(function (data, status) {
            /**
             * 验证完毕后提交注册
             */
            if (data.status == "success") {
              console.log("otp验证通过")
              register(form)
            } else {
              console.log("otp验证失败")
              alert("验证码不正确")
            }
          })
        }
      })

    });

    /**
     * 提交注册
     */
    function register(form) {

      $.post(
        base + "/user/registry",
        $(form).serialize(),
        function (data, status) {
          if (data.status = "success") {
            alert("注册成功")
            window.location.href = "../../index.html"
          }
          else {
            alert("注册失败")
          }
        }
      )
    }
  })
</script>

</html>